<template>
  <div>
      <p v-if="type==='radio'">
        <label :for="name">{{label}}</label>
        <label v-for="(item, prop) in options" :key="prop">
            <input :type="type" v-model="model[name]" :value="prop">{{item}}
            <slot :name="name">&nbsp;</slot>
        </label>
      </p>
      <p v-else-if="type==='checkboxes'">
        <label :for="name">{{label}}</label>
        <label v-for="(item, prop) in options" :key="prop">
          <input type="checkbox" v-model="model[name]" :value="prop">{{item}}
          <slot :name="name">&nbsp;</slot>
        </label>
      </p>
      <p v-else-if="type==='select'">
        <label :for="name">{{label}}</label>
        <select v-model="model[name]" :id="name">
          <option v-for="(item, prop) in options" :key="prop" :value="prop">{{item}}</option>
        </select>
      </p>
      <p v-else-if="type==='textarea'">
          <label :for="name">{{label}}</label>
          <textarea :id="name" v-model="model[name]"></textarea>
      </p>
      <p v-else>
          <label :for="name">{{label}}</label>
          <input :type="type" :id="name" v-model="model[name]">
      </p>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    model: {
      required: true
    },
    name: {
      type: String
    },
    options: {
      default () {
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
  p {
    padding: 0 20px
  }
  p>label:first-of-type {
    display: block
  }
</style>